<template>
  <div id="app">
      <router-view/>
    <div class="appbottom" v-show='$route.path=="/"||$route.path=="/order"||$route.path=="/me"'>
      <div class="appitem" @click='$router.push({path:"/"})'>
        <i :class='{"el-icon-eleme":$route.path!="/"}' style='color:gray;font-size: 20px;'></i>
        <i :class='{"el-icon-eleme":$route.path=="/"}' style='color:rgb(0,142,255);font-size: 20px;'></i>
        首页
      </div>
      <div class="appitem" @click='$router.push({path:"/order"})'>
        <i :class='{"el-icon-tickets":$route.path!="/order"}' style='color:gray;font-size: 20px;'></i>
        <i :class='{"el-icon-tickets":$route.path=="/order"}' style='color:rgb(0,142,255);font-size: 20px;'></i>
        订单
      </div>
      <div class="appitem" @click='$router.push({path:"/me"})'>
      <i :class='{"el-icon-user-solid":$route.path!="/me"}' style='color:gray;font-size: 20px;'></i>
      <i :class='{"el-icon-user-solid":$route.path=="/me"}' style='color:rgb(0,142,255);font-size: 20px;'></i>
        我的
      </div>
    </div>
  </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  export default {
    name: "app",
    methods:{
      ...mapMutations(['setcitylist','setfoodlist']),
      getmsg(){
        this.axios.post('http://127.0.0.1:3000/msg')
                .then((res)=>{
                    this.$store.commit('setcitylist',res.data)
                })
      },
      getshuju(){
        this.axios.post('http://127.0.0.1:3000/shuju')
        .then((res)=>{
          this.$store.commit('setfoodlist',res.data)
        })


      },
    },
    created(){
      this.getmsg();
      this.getshuju();
    }
  };
</script>

<style>
    .appbottom{
      width: 99.8%;
      height: 60px;
      position:absolute;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      background-color: white;
      box-shadow: 0 0 6px gray;
    }
    .appitem{
      width: 33%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      cursor: pointer;
      flex-direction: column;
    }

</style>
